<template>
    <div>
        <el-row>
            <el-col :span="8" align="left">
                <span>客户姓名：</span>
                <el-input placeholder="请输入姓名" v-model="customerName" clearable style="width:50%;"></el-input>
            </el-col>
            <el-col :span="8" align="left">
                <span>身份证：</span>
                <el-input placeholder="请输入身份证号" v-model="idCard" clearable></el-input>
            </el-col>
            <el-col :span="8" align="left">
                <span>联系电话：</span>
                <el-input placeholder="请输入联系电话" v-model="telPhone" clearable></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8" align="left">
                <span>是否注册：</span>
                <el-select v-model="isRegistered" placeholder="请选择" clearable>
                    <el-option
                    v-for="item in isRegisteredArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="8" align="left">
                <span>是否禁用：</span>
                <el-select v-model="isDelete" placeholder="请选择" clearable>
                    <el-option
                    v-for="item in isRegisteredArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="8" align="left">
                <span>注册时间：</span>
                <el-date-picker style="width:70%;"
                    v-model="time"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4" align="left">
                <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="12"></el-col>
            <el-col :span="4" align="right">
                <el-button type="warning" icon="el-icon-present" @click="sendShow=true">生日月赠送积分</el-button>
            </el-col>
            <el-col :span="4" align="right">
                <el-button type="success" icon="el-icon-download" @click="exports" :disabled="exportLoading" :loading="exportLoading">导出信息</el-button>
            </el-col>
        </el-row> 
        <el-table
              :data="table"
              v-loading="tableLoading"
              border
              stripe 
              size="small"
              height="500"
              style="width: 1000">
            <el-table-column
                label="客户姓名"
                fixed="left"
                prop="customerName"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                label="联系电话"
                fixed="left"
                prop="telPhone"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="是否注册"
                fixed="left"
                align="center"
                width="120">
                <template slot-scope="scope">
                    {{scope.row.isRegistered==true?'是':'否'}}
                </template>
            </el-table-column> 
            <el-table-column
                label="小程序总积分"
                prop="xcxIntegral"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="已兑积分"
                prop="acceptedIntegral"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="剩余积分"
                prop="totalIntegral"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                label="生日"
                prop="birthday"
                align="center"
                width="120">
            </el-table-column>  
            <!-- <el-table-column
                label="年龄"
                prop="age"
                align="center"
                width="120">
            </el-table-column>  -->
            <el-table-column
                label="性别"
                prop="sex"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="身份证"
                prop="idCard"
                align="center"
                width="180">
            </el-table-column> 
            <el-table-column
                label="地址"
                prop="address"
                align="center"
                :show-overflow-tooltip="true"
                width="200">
            </el-table-column>  
            <el-table-column
                label="服务人员"
                prop="investmentAdviser"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="商城销售"
                prop="goodsSalemanName"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="注册时间"
                prop="registeredTime"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                label="积分清零时间"
                prop="lastClearTime"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                fixed="right"
                align="center"
                label="操作"
                width="200">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" style="padding: 8px;margin: 2px" 
                @click="edit(scope.row)" :disabled="scope.row.isDelete">修改信息</el-button>
                <el-button style="padding: 8px;margin: 2px" type="danger"
                        size="mini" @click="deleteItem(scope.row)" v-if="!scope.row.isDelete">禁用用户
                </el-button>
                <el-button style="padding: 8px;margin: 2px" type="success"
                        size="mini" @click="openItem(scope.row)" v-if="scope.row.isDelete">启用用户
                </el-button>
                <el-button style="padding: 8px;margin: 2px" type="warning"
                        size="mini" @click="scoreClean(scope.row)" :disabled="scope.row.isDelete">积分清零
                </el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="totalCount"
            style="margin:50px;">
        </el-pagination>
        <div style="margin:30px 0;" class="fw">共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div>
        <el-dialog title="修改信息" :visible.sync="dialogShow"
            v-loading="dialogLoading" :close-on-click-modal="false" width="1200px">
            <el-row>
                <el-col :span="8">会员姓名：
                    <el-input v-model="dialog.customerName" clearable></el-input>
                </el-col>
                <el-col :span="8">联系电话：{{dialog.telPhone}}</el-col>
                <el-col :span="8">是否注册：{{dialog.isRegistered==true?'是':'否'}}</el-col>
            </el-row> 
            <el-row>
                <el-col :span="8">
                    <span>小程序总积分：</span>
                    <el-input type="number" v-model="dialog.xcxIntegral" clearable></el-input>
                </el-col>
                <el-col :span="8">已兑积分：{{dialog.acceptedIntegral}}</el-col>
                <el-col :span="8">剩余积分：{{dialog.totalIntegral}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="8">生日：{{dialog.birthday}}</el-col>
                <el-col :span="8">性别：{{dialog.sex}}</el-col>
                <el-col :span="8">身份证：
                    <el-input v-model="dialog.idCard" clearable></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">积分清零时间：{{dialog.lastClearTime}}</el-col>
                <el-col :span="8">地址：{{dialog.address}}</el-col>
                <el-col :span="8">
                    <span>服务人员：</span> 
                    <el-select
                          v-model="dialog.investmentAdviser"
                          filterable
                          remote
                          placeholder="请输入服务人员姓名"
                          :remote-method="inputsalemanNameMethod"
                          :loading="inputsalemanNameLoading"
                          @change="salemanNameChange" clearable>
                          <el-option
                            v-for="item in inputsalemanNameArray"
                            :key="item.salemanId"
                            :label="item.salemanName"
                            :value="item.salemanName"
                          >
                          </el-option>
                        </el-select>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <span>商城销售：</span> 
                    <el-select
                          v-model="dialog.goodsSalemanName"
                          filterable
                          remote
                          placeholder="请输入商城销售姓名"
                          :remote-method="inputgoodsSalemanNameMethod"
                          :loading="inputsalemanNameLoading"
                          @change="goodsSalemanNameChange" clearable>
                          <el-option
                            v-for="item in inputgoodsSalemanNameArray"
                            :key="item.mallSaleManId"
                            :label="item.mallSaleManName"
                            :value="item.mallSaleManName"
                          >
                          </el-option>
                        </el-select>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8"></el-col>
                <el-col :span="8"></el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="sureAdd">确定</el-button>
                    <el-button type="danger" @click="dialogShow=false">取消</el-button>
                </el-col>
            </el-row> 
        </el-dialog>
        <el-dialog  :visible.sync="sendShow" :close-on-click-modal="false" width="500px">
            <el-row>
                <el-col :span="4"></el-col>
                <el-col :span="16">
                    <span>赠送积分数量：</span>
                    <el-input v-model="sendNumber" clearable type="number" style="width:50%;"></el-input>
                </el-col>
                <el-col :span="4"></el-col>
            </el-row>
            <el-row>
                <el-col :span="4"></el-col>
                <el-col :span="16">
                    <span>赠送月份：</span>
                    <el-date-picker
                        v-model="sendDate"
                        value-format="yyyy-MM"
                        type="month"
                        placeholder="选择月">
                    </el-date-picker>
                </el-col>
                <el-col :span="4"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="6"></el-col>
                <el-col :span="12" align="right">
                    <el-button type="primary" @click="sendGift" :disabled="sendLoading" :loading="sendLoading">确定</el-button>
                    <el-button type="danger" @click="sendShow=false">取消</el-button>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>
<script>
var startTime="";
var endTime="";
var salemanId="";
var goodsSalemanId="";
var searchInfo={
    idCard:"",
    customerName:"",
    telPhone:"",
    startTime:"",
    endTime:"",
    isRegistered:"",
    isDelete:"",
};
export default {
    data(){
        return{
            exportLoading:false,
            idCard:"",
            customerName:"",
            telPhone:"",
            time:"",
            isRegistered:"",
            isDelete:"",
            isRegisteredArr:[
                {
                    value:true,
                    label:"是"
                },
                {
                    value:false,
                    label:"否"
                },
            ],
            tableLoading:false,
            table:[],
            currentPage: 1,
            pageSize: 20,
            totalCount: 0,
            dialogShow:false,
            dialogLoading:false,
            dialog:{},
            inputsalemanNameLoading: false,
            inputsalemanNameArray: [],
            inputgoodsSalemanNameArray:[],
            sendShow:false,
            sendLoading:false,
            sendNumber:0,
            sendDate:"",
        }
    },
    watch: {
        sendNumber(val){
            if(val<0){
                this.sendNumber=0;
            }
        }
    },
    mounted(){
        this.initData()
    },
    methods:{
        requestInfo(){
            if(this.time){
                startTime=this.time[0];
                endTime=this.time[1];
            }else{
                startTime="";
                endTime="";
            }
            this.tableLoading=true;
            this.postRequest("/api/background/customer_info/customer_info_mg", {
                idCard:this.idCard,
                customerName:this.customerName,
                telPhone:this.telPhone,
                startTime:startTime,
                endTime:endTime,
                isRegistered:this.isRegistered,
                isDelete:this.isDelete,
                pageIndex: this.currentPage,
                pageSize: this.pageSize
            })
            .then(resp => {  
                this.tableLoading=false;
                if (resp && resp.data.status == 200){
                    this.table=resp.data.obj.rows;
                    this.totalCount = resp.data.obj.total;
                    searchInfo={
                        idCard:this.idCard,
                        customerName:this.customerName,
                        telPhone:this.telPhone,
                        isRegistered:this.isRegistered,
                        isDelete:this.isDelete,
                        startTime:startTime,
                        endTime:endTime,
                    }
                }
            });
        },
        initData(){
          this.requestInfo()
        },
        search(){
            this.currentPage = 1;
            this.requestInfo()
        },
        //列表当前页改变
        currentChange: function(currentChange) {
            this.currentPage = currentChange;
            this.requestInfo()
        },
        sureAdd(){
            this.dialogLoading=true;
            this.putRequest("/api/background/customer_info/edit_customer_info",{
                customerId:this.dialog.customerId,
                customerName:this.dialog.customerName,
                idCard:this.dialog.idCard,
                xcxIntegral:this.dialog.xcxIntegral,
                investmentAdviserId:salemanId,
                goodsSalemanId:goodsSalemanId,
            }).then(resp =>{
                this.dialogLoading=false;
                if(resp && resp.status==200){
                    this.dialogShow=false;
                    this.common.showToast('success','修改成功')
                    this.requestInfo();
                }
            })
        },
        edit(item){
            this.dialogShow=true;
            this.dialogLoading=true;
            this.postRequest("/api/background/customer_info/customer_info_by_id",{
                customerId:item.customerId
            }).then(resp =>{
                this.dialogLoading=false;
                if(resp && resp.status==200){
                    this.dialog=resp.data.obj;
                    salemanId=resp.data.obj.investmentAdviserId || "";
                    goodsSalemanId=resp.data.obj.goodsSalemanId || "";
                }
            })
        },
        openItem(item){
            this.$confirm("此操作将启用该用户, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(() => {
            this.tableLoading=true;
            this.putRequest("/api/background/customer_info/edit_customer_info",{
                customerId:item.customerId,
                isDelete:false,
            }).then(resp => {
                this.tableLoading=false;
                if (resp && resp.data.status == 200) {
                    this.common.showToast("success", resp.data.msg);
                    this.initData();
                }
            });
            })
            .catch(() => {});
        },
        deleteItem(item){
            this.$confirm("此操作将禁用该用户, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(() => {
            this.tableLoading=true;
            this.deleteRequest("/api/background/customer_info/delete_customer_info?customerId="+item.customerId).then(resp => {
                this.tableLoading=false;
                if (resp && resp.data.status == 200) {
                    this.common.showToast("success", resp.data.msg);
                    this.initData();
                }
            });
            })
            .catch(() => {});
        },
        //积分清零
        scoreClean(item){
            this.$confirm("此操作将该用户积分清零, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(() => {
                this.tableLoading=true;
                this.postRequest("/api/background/customer_info/clean_integral",{
                    customerId:item.customerId
                }).then(resp=>{
                    this.tableLoading=false;
                    if (resp && resp.data.status == 200) {
                        this.common.showToast("success", resp.data.msg);
                        this.initData();
                    }
                })
            })
            .catch(() => {});
        },
        // 输入服务人员
        inputsalemanNameMethod: function(query) {
            if (query !== "") {
                this.inputsalemanNameLoading = true;
                this.postRequest("/api/background/customer_info/get_salemans",{
                    saleName:query
                }).then(
                resp => {
                    if (resp && resp.data.status == 200) {
                        this.inputsalemanNameArray = resp.data.obj;
                    }
                    this.inputsalemanNameLoading = false;
                }
                );
            } else {
                this.inputsalemanNameArray = [];
            }
        },
        // 服务人员发生变化
        salemanNameChange: function(e) {
            var that = this;
            if (e == "") {
                salemanId = "";
            } else {
                that.dialogLoading = true;
                this.postRequest("/api/background/customer_info/get_salemans",{
                    saleName:e
                }).then(
                resp => {
                    that.dialogLoading = false;
                    if (resp && resp.data.status == 200) {
                        salemanId = resp.data.obj[0].salemanId;
                    }
                }
                );
            }
        },
        //输入商城销售
        inputgoodsSalemanNameMethod(query){
            if (query !== "") {
                this.inputsalemanNameLoading = true;
                this.postRequest("/mall/saleman/manage",{
                    mallSaleManName:query
                }).then(
                resp => {
                    if (resp && resp.data.status == 200) {
                        this.inputgoodsSalemanNameArray = resp.data.obj.rows;
                    }
                    this.inputsalemanNameLoading = false;
                }
                );
            } else {
                this.inputgoodsSalemanNameArray = [];
            }
        },
        // 商城销售发生变化
        goodsSalemanNameChange(e){
            console.log(e)
            var that = this;
            if (e == "") {
                goodsSalemanId = "";
            } else {
                that.dialogLoading = true;
                this.postRequest("/mall/saleman/manage",{
                    mallSaleManName:e
                }).then(
                resp => {
                    that.dialogLoading = false;
                    if (resp && resp.data.status == 200) {
                        goodsSalemanId = resp.data.obj.rows[0].mallSaleManId;
                        console.log(goodsSalemanId)
                    }
                }
                );
            }
        },

        sendGift(){
            console.log(this.sendDate)
            if(this.common.isNull(this.sendNumber)){
                this.common.showToast('warning','请输入正确数量')
                return false;
            }else if(!this.sendDate){
                this.common.showToast('warning','请输入月份')
                return false;
            }
            this.sendLoading=true;
            this.sendLoading=false; 
            this.sendShow=false;
            
            // var address=this.getRequest("/api/background/integral_record/send_integral_to_customer?integralCount="+this.sendNumber).then(resp=>{
            //     this.sendLoading=false;
            //     if(resp && resp.status==200){
            //         this.common.showToast("success",'赠送成功')
            //     }
            // })

            var address='/api/background/integral_record/send_integral_to_customer?integralCount='+this.sendNumber+'&sendDate='+this.sendDate;
            this.common.downloadFile(address);  
        },
        exports(){
            this.exportLoading=true;
            console.log(searchInfo)
            var address=`/api/background/customer_info/customer_export?customerName=${searchInfo.customerName}&&telPhone=${searchInfo.telPhone}&&idCard=${searchInfo.idCard}&&isRegistered=${searchInfo.isRegistered}&&isDelete=${searchInfo.isDelete}&&startTime=${searchInfo.startTime}&&endTime=${searchInfo.endTime}`
            this.common.downloadFile(address);
            setTimeout(() => {
                this.exportLoading=false;
            }, 2000); 
        }
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
}
.el-col {
  height: 50px;
  line-height: 50px;
}
.el-input{
    width: 70%;
}
.el-dialog .el-row{
    height: auto;
    min-height: 50px;
}
.el-dialog .el-col{
    height: auto;
    min-height: 50px;
    text-align: left;
    padding: 0 10px;
    box-sizing: border-box;
}
</style>